 <template>
  <div class="container">
    <!-- 第一行 -->
    <el-row style="margin-bottom: 20px" type="flex" class="row-bg">
      <el-col>
        <div class="grid-content bg-purple-dark topBox">
          <span class="titleBox">说明：目前支持学科和关键字条件筛选</span>
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="$router.push('/questions/new')"
            >新增试题</el-button
          >
        </div>
      </el-col>
    </el-row>

    <el-form
      :model="form"
      size="small"
      label-width="80px"
      class="demo-form-inline"
    >
      <!-- 第二行 -->
      <el-row type="flex" class="row-bg">
        <el-col :span="6">
          <el-form-item label-width="80px" label="学科">
            <el-select
              @change="getsubjecFn"
              style="width: 100%"
              v-model="form.subjectID"
              placeholder="请选择"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.subjectName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select
              style="width: 100%"
              v-model="form.TwoList"
              placeholder="请选择"
            >
              <el-option
                v-for="item in TwoList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select
              style="width: 100%"
              v-model="form.LabelList"
              placeholder="请选择"
            >
              <el-option
                v-for="item in LabelList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input
              v-model.trim="form.keyword"
              placeholder="根据题干搜索"
            ></el-input> </el-form-item
        ></el-col>
      </el-row>

      <!-- 第三行 -->
      <el-row type="flex" class="row-bg">
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select
              style="width: 100%"
              v-model="form.questionType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in questionTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select
              style="width: 100%"
              v-model="form.difficulty"
              placeholder="请选择"
            >
              <el-option
                v-for="item in difficultyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select
              style="width: 100%"
              v-model="form.direction"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in directionList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select
              style="width: 100%"
              v-model="form.entering"
              placeholder="请选择"
            >
              <el-option
                v-for="item in enteringList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第四行 -->
      <el-row type="flex" class="row-bg">
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model.trim="form.remarks"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="企业简称" style="margin-left: 2px">
            <el-input class="ipt" v-model.trim="form.the"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <el-select
              style="width: 48%; margin-right: 4%"
              v-model.trim="form.provinces"
              placeholder="请选择"
              @change="changeFn"
            >
              <el-option
                v-for="(item, index) in provincesList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              style="width: 48%"
              class="selectbox"
              v-model="form.citys"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in citysList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col class="rightBox" :span="6">
          <el-form-item class="rightbox">
            <el-button size="small" @click="clearFn">清除</el-button>
            <el-button size="small" type="primary" @click="onSubmit"
              >筛选</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// 引入获取学科列表的接口
import { Sublist as getList } from '@/api/hmmm/subjects'

// 引入获取二级目录的接口
import { Dirsimple as getTwoList } from '@/api/hmmm/directorys'

// 引入获取标签列表
import { Tagsimple as getLabelList } from '@/api/hmmm/tags'

// 引入试题类型  难度  方向
import { questionType, difficulty, direction } from '@/api/hmmm/constants'

// 引入录入人接口
import { Usersimple as getenteringList } from '@/api/base/users'

// 引入城市选择接口
import { provinces, citys } from '@/api/hmmm/citys'

export default {
  data () {
    return {
      subjectList: [], // 学科列表
      TwoList: [], // 二级目录
      LabelList: [], // 标签列表
      questionTypeList: questionType, // 试题类型
      difficultyList: difficulty, // 试题难度
      directionList: direction, // 试题方向
      enteringList: [], // 录入人
      provincesList: provinces(), // 城市
      citysList: [], // 地区
      form: {
        subjectID: '', // 学科id
        TwoList: '', // 二级目录
        LabelList: '', // 标签
        questionType: '', // 试题类型
        difficulty: '', // 试题难度
        direction: '', // 试题方向
        entering: '', // 录入人
        remarks: '', // 题目备注
        the: '', // 题目简称
        provinces: '', // 城市
        citys: '', // 地区
        keyword: '' // 关键字
      }
    }
  },
  methods: {
    // 获取学科列表的方法
    async hgetList () {
      const res = await getList({ page: 1 })
      const ret = await getList({ page: 2 })
      this.subjectList = [...res.data.items, ...ret.data.items]
    },
    // 获取二级目录的方法
    async hgetTwoList () {
      // 调用接口获取二级路由
      const res = await getTwoList({ subjectID: this.form.subjectID })

      // 负值给本地
      this.TwoList = res.data
    },
    // 获取标签的方法方法
    async hgetlabelList () {
      // 掉接口获取标签列表
      const res = await getLabelList({ subjectID: this.form.subjectID })

      // 负值给本地列表
      this.LabelList = res.data
    },
    // 获取录入人的方法
    async hgetenteringList () {
      // 掉接口获取录入人接口
      const res = await getenteringList()

      // 赋值给本地
      this.enteringList = res.data
    },
    // 选择城市的方法
    changeFn () {
      // 获取地区赋值给本地
      this.citysList = citys(this.form.provinces)
    },
    // 点击清除触发的事件
    clearFn () {
      // 清空form表单
      this.form = {
        subjectID: '', // 学科id
        TwoList: '', // 二级目录
        LabelList: '', // 标签
        questionType: '', // 试题类型
        difficulty: '', // 试题难度
        direction: '', // 试题方向
        entering: '', // 录入人
        remarks: '', // 题目备注
        the: '', // 题目简称
        provinces: '', // 城市
        citys: '', // 地区
        keyword: '' // 关键字
      }
    },
    // 点击搜索触发的事件
    onSubmit () {
      this.$eventBus.$emit('tranFn', this.form)
    },
    // 点击学科触发的事件
    getsubjecFn () {
      // 先清空上次搜索的结果
      this.form.TwoList = ''

      // 再掉接口获取二级菜单
      this.hgetTwoList()

      // 先清空上次搜索的结果
      this.form.LabelList = ''

      // 掉接口获取标签列表
      this.hgetlabelList()

      // 获取录入人的方法
      this.hgetenteringList()
    }
  },
  mounted () {
    // 调用方法获取学科列表
    this.hgetList()
  }

}
</script>

<style lang="scss" scoped>
.container {
  .topBox {
    display: flex;
    justify-content: space-between;
    .titleBox {
      font-size: 12px;
      color: #ffc0cb;
    }
  }
  .rightBox {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
